<template>
	<view>
		<ttBar leftIcon="icon-back" title="我的团队"></ttBar>
		<view class="pubList">
			<view class="row">
				<image src="http://s.de123.com/kf.png"></image>
				<view class="info">
					<text>找培训公众号</text>
					<text>复制添加，及时收取收益信息</text>
				</view>
				<text @tap="copyWx">复制公众号</text>
			</view>
			<view class="row">
				<image src="http://s.de123.com/wxkf.jpg"></image>
				<view class="info">
					<text>找培训官方客服</text>
					<text>复制添加，及时收取收益信息</text>
				</view>
				<text @tap="copyTel">客服</text>
			</view>
		</view>
		<view class="teamList">
			<text>共有{{total}}人</text>
			
			<view class="row" v-for="(item,index) in dataList" :key="index">
				<image :src="item.pic?item.pic:'../../static/loding.png'"></image>
				<view class="info">
					<text>{{item.nickname}}</text>
					<text>{{item.createTime}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import TL from '../../common/tool.js';
export default {
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo
		})
	},
	data() {
		return {
			hasNext:true,
			page_no:1,
			dataList:[],
			total:0
		};
	},
	methods: {
		copyWx(){
			uni.setClipboardData({
			    data:'都秀文化',
			    success: ()=>{
			       uni.showToast({
			       	title: '公众号复制成功',
			       	icon: 'none'
			       });
			    }
			});
		},
		copyTel(){
			uni.setClipboardData({
			    data:'18851638143',
			    success: ()=>{
			       uni.showToast({
			       	title: '客服电话复制成功',
			       	icon: 'none'
			       });
			    }
			});
		},
		getData() {
			if(this.hasNext){
				this.$store.dispatch("apiGetTeamList",{
					parentId:this.userInfo.userId,
					page_no:this.page_no,
					page_size:10
				}).then(res=>{
					this.total=res.data.data.total;
					this.dataList=this.dataList.concat(res.data.data.items);
					this.hasNext=res.data.data.hasNext;
					this.page_no=res.data.data.nextPage;
				})
			}else{
				uni.showToast({
					title: '没有更多的数据了',
					icon: 'none'
				});
			}
		}
	},
	onLoad() {
		this.getData()
	},
	// 页面滚动到底部
	onReachBottom() {
		this.getData();
	},
	// 下拉刷新
	onPullDownRefresh() {
		setTimeout(() => {
			this.page_no=1;
			this.hasNext=true;
			this.dataList=[];
			this.getData();
			uni.stopPullDownRefresh();
		}, 1500)
	}
};
</script>

<style lang="less">
page {
	background-color: #f6f6f6;
}
.pubList {
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	border-top: 1px solid #f6f6f6;
	padding: 32upx 22upx;
	.row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		background-color: #fcf3e7;
		border-radius: 15rpx;
		padding: 30upx 20upx;
		margin-bottom: 20upx;
		image {
			width: 90upx;
			height: 90upx;
			border-radius: 50%;
			flex-shrink: 0;
		}
		.info {
			display: flex;
			flex-direction: column;
			text:first-child {
				font-size: 32upx;
				color: #202932;
			}
			text:last-child {
				font-size: 24upx;
				color: #65696d;
			}
		}
		> text {
			height: 60upx;
			width: 200upx;
			border-radius: 30upx;
			color: #ffffff;
			background-color: #ffb423;
			font-size: 28upx;
			text-align: center;
			line-height: 60upx;
		}
	}
}
.teamList {
	display: flex;
	flex-direction: column;
	padding: 30upx 20upx;
	> text {
		font-size: 32upx;
		margin-bottom: 20upx;
	}
	.row {
		display: flex;
		align-items: center;
		padding: 18upx 20upx;
		background-color: #ffffff;
		border-radius: 16upx;
		box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
		margin-bottom: 20upx;
		image {
			width: 90upx;
			height: 90upx;
			border-radius: 50%;
			flex-shrink: 0;
			margin-right: 24upx;
		}
		.info {
			display: flex;
			flex-direction: column;
			text:first-child {
				font-size: 32upx;
				color: #202932;
			}
			text:last-child {
				font-size: 28upx;
				color: #65696d;
			}
		}
	}
}
</style>
